import { createRouter, createWebHistory } from 'vue-router'
import routes from './routes'
import useTabsStore from '@/store/tabs-nav'
import useUserStore from '@/store/user'
import SiteLayout from '@/layout/index.vue'

let tabsStore: any = undefined
let userStore: any = undefined

const router = createRouter({
  history: createWebHistory(),
  routes,
})

// 白名单页面
const whiteList = ['/login']

// 全局前置守卫: 将访问历史添加到 tabs 标签中
router.beforeEach((to) => {
  // to 是即将进入的目标路由
  if (!tabsStore) {
    tabsStore = useTabsStore()
  }
  // 判断即将进入的目标路由是否是菜单项对应路由(不能是子菜单路由)
  const toMatched = to.matched.slice(-1)[0]
  if (!whiteList.includes(to.path) && toMatched.children.length === 0) {
    tabsStore.addTab({
      path: to.path,
      title: to.meta?.title ?? '默认标题',
    })
  }
})

// 全局前置守卫: 拦截页面的访问权限，在用户未登录的情况下，
// 跳转到登录页面登录成功后才能进行访问
// 判断即将进入的目标路由是否在白名单中(白名单中的页面无需登录即可访问)，
// 如果即将进入的路由是白名单中的页面，则直接放行进行下一步访问即可。
// 如果即将进入的路由不是白名单中的页面，则需要判断是否用户已登录。
// 判断用户是否已登录是根据 store 中保存的用户 token 来处理的，
// 有 token 存在则表示已登录，没有 token 则表示未登录。
// 如果即将进入的路由不是白名单中的页面并且用户未登录，则跳转到登录页面
router.beforeEach(async(to) => {
  if (!userStore) {
    userStore = useUserStore()
  }
  // 获取用户登录的 token
  const token = userStore.token

  // 用户已登录
  if (token) {
    // 判断是否有用户基本信息，没有的话则查询
    const userInfo = userStore.userInfo
    if (!userInfo) {
      // 等待查询用户信息
      await userStore.getUserInfoAction()
      // 获取用户菜单路由表
      const menuRoutes = await userStore.menuRoutes
      // 动态添加路由
      router.addRoute({ path: '/', component: SiteLayout, children: menuRoutes })
      return to
    }
    // 已登录再访问登录页面，则直接跳转到主页面
    if (to.path === '/login') {
      return '/dashboard'
    }
  } else { // 用户未登录
    // 访问非白名单页面，则跳转到登录页面
    if (!whiteList.includes(to.path)) {
      return '/login'
    }
  }
})

export default router
